<!DOCTYPE html> 
<html>
<head>
    <title>TreeMakermx2</title>
    <script type="text/javascript" src="simpletreemenu.js"></script>
    <link rel="stylesheet" type="text/css" href="simpletree.css" />
    <link href="./dist/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="./lib/jquery.min.js"></script>
    <script type="text/javascript" src="./dist/jplayer/jquery.jplayer.min.js"></script>
    <script type="text/javascript" src="./dist/add-on/jplayer.playlist.min.js"></script>
    <script type="text/javascript">
$(document).ready(function(){

	var myPlaylist = new jPlayerPlaylist({
		jPlayer: "#jquery_jplayer_N",
		cssSelectorAncestor: "#jp_container_N"
	},[
	
	], {
		playlistOptions: {
			enableRemoveControls: true
		},
		swfPath: "./dist/jplayer",
		supplied: "webmv, ogv, m4v, oga, m4a, mp3",
		useStateClassSkin: true,
		autoBlur: false,
		smoothPlayBar: true,
		keyEnabled: true,
		audioFullScreen: true

	});

	  $("#playlist-add-bubblexxx,treemenu3").on("click", function(e) {
		var songtitle = $(this).data('name');
		var songpath = $(this).data('path');
		var songcover = $(this).data('foto');
		var songartist = $(this).data('artist'); 
		myPlaylist.add({
			title:songtitle,
			artist:songartist,
			mp3:songpath,
			poster:songcover
		});
		return false;
	});

	// The remove commands

	$("#playlist-remove").click(function() {
		myPlaylist.remove();
	});

	$("#playlist-remove--2").click(function() {
		myPlaylist.remove(-2);
	});
	$("#playlist-remove--1").click(function() {
		myPlaylist.remove(-1);
	});
	$("#playlist-remove-0").click(function() {
		myPlaylist.remove(0);
	});
	$("#playlist-remove-1").click(function() {
		myPlaylist.remove(1);
	});
	$("#playlist-remove-2").click(function() {
		myPlaylist.remove(2);
	});

	// The shuffle commands

	$("#playlist-shuffle").click(function() {
		myPlaylist.shuffle();
	});

	$("#playlist-shuffle-false").click(function() {
		myPlaylist.shuffle(false);
	});
	$("#playlist-shuffle-true").click(function() {
		myPlaylist.shuffle(true);
	});

	// The select commands

	$("#playlist-select--2").click(function() {
		myPlaylist.select(-2);
	});
	$("#playlist-select--1").click(function() {
		myPlaylist.select(-1);
	});
	$("#playlist-select-0").click(function() {
		myPlaylist.select(0);
	});
	$("#playlist-select-1").click(function() {
		myPlaylist.select(1);
	});
	$("#playlist-select-2").click(function() {
		myPlaylist.select(2);
	});

	// The next/previous commands

	$("#playlist-next").click(function() {
		myPlaylist.next();
	});
	$("#playlist-previous").click(function() {
		myPlaylist.previous();
	});

	// The play commands

	$("#playlist-play").click(function() {
		myPlaylist.play();
	});

	$("#playlist-play--2").click(function() {
		myPlaylist.play(-2);
	});
	$("#playlist-play--1").click(function() {
		myPlaylist.play(-1);
	});
	$("#playlist-play-0").click(function() {
		myPlaylist.play(0);
	});
	$("#playlist-play-1").click(function() {
		myPlaylist.play(1);
	});
	$("#playlist-play-2").click(function() {
		myPlaylist.play(2);
	});

	// The pause command

	$("#playlist-pause").click(function() {
		myPlaylist.pause();
	});

	// Changing the playlist options

	// Option: autoPlay

	$("#playlist-option-autoPlay-true").click(function() {
		myPlaylist.option("autoPlay", true);
	});
	$("#playlist-option-autoPlay-false").click(function() {
		myPlaylist.option("autoPlay", false);
	});

	// Option: enableRemoveControls

	$("#playlist-option-enableRemoveControls-true").click(function() {
		myPlaylist.option("enableRemoveControls", true);
	});
	$("#playlist-option-enableRemoveControls-false").click(function() {
		myPlaylist.option("enableRemoveControls", false);
	});

	// Option: displayTime

	$("#playlist-option-displayTime-0").click(function() {
		myPlaylist.option("displayTime", 0);
	});
	$("#playlist-option-displayTime-fast").click(function() {
		myPlaylist.option("displayTime", "fast");
	});
	$("#playlist-option-displayTime-slow").click(function() {
		myPlaylist.option("displayTime", "slow");
	});
	$("#playlist-option-displayTime-2000").click(function() {
		myPlaylist.option("displayTime", 2000);
	});

	// Option: addTime

	$("#playlist-option-addTime-0").click(function() {
		myPlaylist.option("addTime", 0);
	});
	$("#playlist-option-addTime-fast").click(function() {
		myPlaylist.option("addTime", "fast");
	});
	$("#playlist-option-addTime-slow").click(function() {
		myPlaylist.option("addTime", "slow");
	});
	$("#playlist-option-addTime-2000").click(function() {
		myPlaylist.option("addTime", 2000);
	});

	// Option: removeTime

	$("#playlist-option-removeTime-0").click(function() {
		myPlaylist.option("removeTime", 0);
	});
	$("#playlist-option-removeTime-fast").click(function() {
		myPlaylist.option("removeTime", "fast");
	});
	$("#playlist-option-removeTime-slow").click(function() {
		myPlaylist.option("removeTime", "slow");
	});
	$("#playlist-option-removeTime-2000").click(function() {
		myPlaylist.option("removeTime", 2000);
	});

	// Option: shuffleTime

	$("#playlist-option-shuffleTime-0").click(function() {
		myPlaylist.option("shuffleTime", 0);
	});
	$("#playlist-option-shuffleTime-fast").click(function() {
		myPlaylist.option("shuffleTime", "fast");
	});
	$("#playlist-option-shuffleTime-slow").click(function() {
		myPlaylist.option("shuffleTime", "slow");
	});
	$("#playlist-option-shuffleTime-2000").click(function() {
		myPlaylist.option("shuffleTime", 2000);
	});



});

</script>
</head>
<body>
<div style='background-color:#f8f8f8; width:30%; margin:0px auto 50px; padding:0px; border-radius:10px; border:1px solid #808080; box-shadow:8px 15px 20px #404040'>
<center><a href="javascript:ddtreemenu.flatten('treemenu3', 'expand')" style="font-family:'Arial';font-size:14pt;color:black;">Expand All</a> | <a href="javascript:ddtreemenu.flatten('treemenu3', 'contact')"style="font-family:'Arial';font-size:14pt;color:#000000;">Collapse All</a>
</center></div>
 <div id="tree" style="float:left; width:45%; border: 1px solid black;"> 
<!-- <div style="width:50%;border: 1px solid black;background-color:#ffffff; layer-background-color:#003366; visibility: visible"> -->

  <ul id="treemenu3" class="treeview">
<?php
//define('BASE_PATH', dirname(__FILE__));
//define('ROOT_PATH', dirname(BASE_PATH));
//define('TMP_PATH', ROOT_PATH . '/tmp');
//define('GIMAGE_PATH', ROOT_PATH . '/src/gimage');

//require GIMAGE_PATH . '/gutils.php';
//require GIMAGE_PATH . '/gimage.php';

   
   include  "scandr2.php"	;

      $path = "/mnt/home/music";

      $songs = array();
      $iii = 0;
   // $filestructure= scan_directory_recursively($path, false);
      $filestructure = scan_directory_recursively($path, mp3);

foreach($filestructure as $content) {

 $songs[$iii][path] = $content[path];
 $songs[$iii][name] = $content[name];
 $songs[$iii][kind] = $content[kind];
 $songs[$iii][size] = $content[size];
 $songs[$iii][content] = $content[content];		 
	 
++$iii;
}

	  $data = orderBy($songs, 'name');

foreach($data as $subcontent) {

  if ($subcontent[kind] =='directory'){
	 echo "<li>".$subcontent[name]."\n";
//   echo "<li><img src='".($subcontent[path])."/album_cover.jpg' width='20' height='20'></img>".$subcontent[name]." \n";
	 echo "<ul>"."\n";

     echo scan_dd($subcontent[content]);
     echo "</ul>"."\n";

  }else{
         if ($subcontent[kind] =='file'){
  
 echo "<li><a 
      data-role='button' 
      id='playlist-add-bubblexxx' 
      data-click='onClick' 
      data-name='".$subcontent[name]."' 
      data-path='".get_path($subcontent[path])."'
      data-foto='".get_album_cover($subcontent[path])."'
      data-artist='".get_artist($subcontent[path])."' 
      rel='external'>".$subcontent[name]."</a>";
         }
         
       }
}

 function scan_dd($array){
 
 foreach($array as $subcontent) {
 $songs[$i][path] = $subcontent[path];
 $songs[$i][name] = $subcontent[name];
 $songs[$i][kind] = $subcontent[kind];
 $songs[$i][size] = $subcontent[size];
 $songs[$i][content] = $subcontent[content];
    if ($songs[$i][kind] =='directory'){
  echo "<li>".$subcontent[name]." \n";
//    echo "<li><img src='".get_path($subcontent[path])."/album_cover.jpg' width='20' height='20'></img>".$subcontent[name]." \n";
//	 echo "<li><img src='rotate2.php?path=".($subcontent[path])."/album_cover.jpg&scale=10' width='20' height='20'></img>".$subcontent[name]."\n";
	 echo "<ul>"."\n";;
	$go_array = $subcontent[content];
	echo scan_dd ($go_array);
    echo "</ul>"."\n";
    }
++$i;
}
$data = orderBy($songs, 'name');

  foreach($data as $subcontent) {

    if ($subcontent[kind] =='file'){
         
 echo "<li><a 
      data-role='button' 
      id='playlist-add-bubblexxx' 
      data-click='onClick' 
      data-name='".$subcontent[name]."' 
      data-path='".get_path($subcontent[path])."'
      data-foto='".get_album_cover($subcontent[path])."'
      data-artist='".get_artist($subcontent[path])."' 
      rel='external'>".$subcontent[name]."</a>";

         }

    }

}

function orderBy($data, $field) { 
	$code = "return strnatcmp(\$a['$field'], \$b['$field']);";
	usort($data, create_function('$a,$b', $code));
	 return $data;
} 

function get_path($path) {
  $len = strlen($path);
//  $pos = strpos($path,'/music/');
  $pos = strpos($path,'/music/');
    
  $http_path =  substr($path,$pos,$len);
  //$filename = substr(strrchr($path, "/"), 1);
       $go_path = "http://".$_SERVER['SERVER_NAME'].$http_path;
	  return $go_path;
}

function show_cover($path,$scale) {

$image = new GImage();
$image->load($path);

$image->scale($scale);

$image->getWidth();
$image->preserve(false);
$image->output();

}

function get_album_cover($path) {
$http_path_artist = dirname(get_path($path))."/album_cover.jpg";	  
	  return $http_path_artist;
}

function get_artist($path) {
    $ii = 0;
    $path7 = parse_url($path, PHP_URL_PATH);
    $segments7 = explode('/', rtrim($path7, '/'));
  while ($ii < count($segments7)){
     if ($segments7[$ii] == "music") {
          $artist_name = $segments7[$ii+1];
     }
$ii++;
}
	  return $artist_name;
}


?>
</ul>
<script type="text/javascript">
ddtreemenu.createTree("treemenu3", true)
</script>

</div>

<div id="exco" style="float:left;padding-left: 10px;"> 
<!--  <a href="javascript:ddtreemenu.flatten('treemenu3', 'expand')" style="font-family:'Arial';font-size:14pt;color:black;filter:Glow(color=#ff0000,strength=12);">Expand All</a> | <a href="javascript:ddtreemenu.flatten('treemenu3', 'contact')"style="font-family:'Arial';font-size:14pt;color:#000000;filter:Glow(color=#ff0000,strength=12);">Collapse All</a>  -->

  <div id="jp_container_N" class="jp-video jp-video-270p" role="application" aria-label="media player">
	<div class="jp-type-playlist">
		<div id="jquery_jplayer_N" class="jp-jplayer"></div>
		<div class="jp-gui">
			<div class="jp-video-play">
				<button class="jp-video-play-icon" role="button" tabindex="0">play</button>
			</div>
			<div class="jp-interface">
				<div class="jp-progress">
					<div class="jp-seek-bar">
						<div class="jp-play-bar"></div>
					</div>
				</div>
				<div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
				<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
				<div class="jp-controls-holder">
					<div class="jp-controls">
						<button class="jp-previous" role="button" tabindex="0">previous</button>
						<button class="jp-play" role="button" tabindex="0">play</button>
						<button class="jp-next" role="button" tabindex="0">next</button>
						<button class="jp-stop" role="button" tabindex="0">stop</button>
					</div>
					<div class="jp-volume-controls">
						<button class="jp-mute" role="button" tabindex="0">mute</button>
						<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
						<div class="jp-volume-bar">
							<div class="jp-volume-bar-value"></div>
						</div>
					</div>
					<div class="jp-toggles">
						<button class="jp-repeat" role="button" tabindex="0">repeat</button>
						<button class="jp-shuffle" role="button" tabindex="0">shuffle</button>
						<button class="jp-full-screen" role="button" tabindex="0">full screen</button>
					</div>
				</div>
				<div class="jp-details">
					<div class="jp-title" aria-label="title">&nbsp;</div>
				</div>
			</div>
		</div>
		<div class="jp-playlist">
			<ul>
				<!-- The method Playlist.displayPlaylist() uses this unordered list -->
				<li>&nbsp;</li>
			</ul>
		</div>
		<div class="jp-no-solution">
			<span>Update Required</span>
			To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
		</div>
	</div>
</div>

</div>

</body>
</html>
